<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Alpona - A Clean Responsive Flat B3 Admin Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Admin Panel Template">
        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/jquery.selectBoxIt.css" rel="stylesheet">
        <link href="css/font-alpona.css" rel="stylesheet">
        <link href="css/prettify.css" rel="stylesheet">
        <link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
        <link href="css/bootstrap-reset.css" rel="stylesheet">
        <!--fav and touch icons -->
        <link rel="shortcut icon" href="ico/favicon.ico">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
        <script src="js/jquery.js"></script>
        <!--[if lt IE 9]>
        <script src="js/respond.min.js"></script>
        <![endif]-->
    </head>
    <body class="fixed-topbar">
        <div class="main-wrapper">
            <div class="scroll-top">
                <a href="#" class="tip-top" title="Go Top"><i class="icon-arrow-up"></i></a>
            </div>
            <!-- TOP BAR -->
            <div class="top-bar">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-6 col-md-3">
                            <a href="#" class="left-toggle"><i class="icon-menu-2 "></i></a>
                            <!-- LOGO -->
                            <div class="branding">
                                <a href="index.html"><img src="images/alpona-logo.png" alt="Alpona Logo"></a>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-2 responsive-notification-mnu">
                            <ul class="notification-bar">
                                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-bell"></i></a>
                                    <div class="dropdown-menu">
                                        <div class="dropdown-head">
                                            <h6>You have 10 new notifications</h6>
                                        </div>
                                        <ul class="notification-list">
                                            <li><a href="#" class="clearfix"><i class="icon-star blue"></i><span class="notification-intro">Donec pretium enim vel nisl viverra posuere.<span class="notification-time">8 min ago</span></span></a></li>
                                            <li><a href="#" class="clearfix"><i class=" icon-bell orange"></i><span class="notification-intro">Vestibulum viverra magna vitae dui volutpat dapibus. <span class="notification-time">3 hours ago</span></span></a></li>
                                            <li><a href="#" class="clearfix"><i class=" icon-bolt brown"></i><span class="notification-intro">Fusce eget ipsum in odio consectetur condimentum et id nisl.<span class="notification-time">5 hours ago</span></span></a></li>
                                            <li><a href="#" class="clearfix"><i class=" icon-ok-sign green"></i><span class="notification-intro">Mauris fringilla metus in mauris molestie tempor <span class="notification-time">8 hours ago</span></span></a></li>
                                        </ul>
                                        <div class="action-btn">
                                            <button class="btn btn-block">View All</button>
                                        </div>
                                    </div>
                                </li>
                                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="count-noty">12</span><i class="icon-envelop-opened"></i></a>
                                    <div class="dropdown-menu">
                                        <div class="dropdown-head">
                                            <h6>You have 32 new messages</h6>
                                        </div>
                                        <ul class="msg-list">
                                            <li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/binjal.png"></span><span><i>binjal</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
                                            <li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/sharmin.png"></span><span><i>sharmin</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
                                            <li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/shusi.png"></span><span><i>shusi</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
                                            <li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/jamjam.png"></span><span><i>jamjam</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
                                            <li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/sinha.png"></span><span><i>sinha</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
                                        </ul>
                                        <div class="action-btn">
                                            <button class="btn btn-block">View All</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-6 col-md-4 clearfix">
                            <nav class="navbar top-navigation" role="navigation">
                                <!-- Brand and toggle get grouped for better mobile display -->
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                </div>
                                <!-- Collect the nav links, forms, and other content for toggling -->
                                <div class="collapse navbar-collapse navbar-ex1-collapse">
                                    <ul class="nav navbar-nav">
                                        <li class="active"><a href="#">Link</a></li>
                                        <li><a href="#">Link</a></li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li><a href="#">Separated link</a></li>
                                                <li><a href="#">One more separated link</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                                <!-- /.navbar-collapse -->
                            </nav>
                        </div>
                        <div class="col-sm-6 col-md-3 clearfix responsive-log-mnu">
                            <!-- ADMIN DRODOWN MENU -->
                            <div class="loged-nav pull-right">
                                <ul class="clearfix">
                                    <li class="log-nav dropdown pull-right"><a class="dropdown-toggle clearfix" data-toggle="dropdown">
                                            <span class="pull-left loged-user-name">Sharmin Sultana</span><span class="logged-user-thumb pull-right"><img class="img-circle" src="images/admin-avatar.jpg" alt="Admin"></span></a>
                                        <div class="dropdown-menu">
                                            <ul class="pull-right">
                                                <li><a href="#">kjamanebr@gmail.com</a></li>
                                                <li><a href="#">Edit Profile</a></li>
                                                <li><a href="#">Inbox</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#" class="logout-link"><i class="icon-lock-3"></i> Logout</a></li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- LEFT BAR -->
            <div class="left-bar merge-left">
                <!-- SEARCH BAR -->
                <div class="search-bar">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button"><i class="icon-search"></i></button>
                        </span>
                    </div>
                </div>
                <!-- LEFT NAV -->
                <div class="left-nav">
                    <ul class="side-navigation accordion" id="nav-accordion">
                        <li><a href="index.html"><i class="icon-home"></i> Home</a></li>
                        <li><a href="#"><i class="icon-list-alt"></i>Forms</a>
                            <ul>
                                <li><a href="form-elements.html"><i class="icon-double-angle-right"></i>All Form Elements</a></li>
                                <li><a href="extended-form-elements.html"><i class="icon-double-angle-right"></i> Extended Form Elements <span class="nav-instruction"> Lots of plugins is used here</span></a></li>
                                <li><a href="form-validation.html"><i class="icon-double-angle-right"></i>Form Validation</a></li>
                                <li><a href="form-wizard.html"><i class="icon-double-angle-right"></i>Stepy Form</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="icon-table-2"></i>Tables</a>
                            <ul>
                                <li><a href="basic-table.html"><i class="icon-double-angle-right"></i> Basic Tables <span class="nav-instruction"> This is an instruction</span></a></li>
                                <li><a href="table-themes.html"><i class="icon-double-angle-right"></i> Tables-Theme</a></li>
                                <li><a href="data-tables.html"><i class="icon-double-angle-right"></i> Data Tables</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="icon-columns"></i> Grid/Portlets</a>
                            <ul>
                                <li><a href="boxy-grids-porlets.html"><i class="icon-double-angle-right"></i> Boxy Grid/Portlets <span class="nav-instruction"> This is an instruction</span></a></li>
                                <li><a href="non-boxy-grids-porlets.html"><i class="icon-double-angle-right"></i> Non Boxy Grid/Portlets</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="icon-laptop"></i> Layout &AMP; Dashboard</a>
                            <ul>
                                <li><a href="blank-layout.html"><i class="icon-double-angle-right"></i> Blank Layout <span class="nav-instruction"> This is an instruction</span></a></li>
                                <li><a href="fixed-topbar.html"><i class="icon-double-angle-right"></i> Fixed Topbar</a></li>
                                <li><a href="fixed-leftbar.html"><i class="icon-double-angle-right"></i> Fixed Leftbar</a></li>
                                <li><a href="top-dropdown-menu.html"><i class="icon-double-angle-right"></i> Top Dropdown Menu</a></li>
                                <li><a href="no-sidebar.html"><i class="icon-double-angle-right"></i> No Sidebar</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="icon-font"></i> Typography</a>
                            <ul>
                                <li><a href="typography-boxy.html"><i class="icon-double-angle-right"></i> Boxy Typography <span class="nav-instruction"> This is an instruction</span></a></li>
                                <li><a href="typography-non-boxy.html"><i class="icon-double-angle-right"></i> Non Boxy Typography</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="icon-cord"></i> UI Elements</a>
                            <ul>
                                <li><a href="bootstrap-ui.html"><i class="icon-double-angle-right"></i> Bootstrap UI <span class="nav-instruction"> This is an instruction</span></a></li>
                                <li><a href="jquery-ui.html"><i class="icon-double-angle-right"></i> jQuery UI</a></li>
                                <li><a href="extended-ui-elements.html"><i class="icon-double-angle-right"></i> Extended Elements<span class="nav-instruction"> More Cool UI elements plugins </span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="icon-tools"></i> Components &AMP; Plugins</a>
                            <ul>
                                <li><a href="buttons-icons.html"><i class="icon-double-angle-right"></i> Buttons &AMP; Icons</a></li>
                                <li><a href="wysiwyg.html"><i class="icon-double-angle-right"></i> WYSIWYG Text Editor</a></li>
                                <li><a href="calendar.html"><i class="icon-double-angle-right"></i> Calendar</a></li>
                                <li><a href="flot-chart.html"><i class="icon-double-angle-right"></i> Flot Chart</a></li>
                                <li><a href="google-chart.html"><i class="icon-double-angle-right"></i> Google Chart</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="icon-files"></i> Example Pages</a>
                            <ul>
                                <li><a href="content-post.html"><i class="icon-double-angle-right"></i> Content Post</a></li>
                                <li><a href="login.html"><i class="icon-double-angle-right"></i> Login</a></li>
                                <li><a href="product-list.html"><i class="icon-double-angle-right"></i> Products List</a></li>
                                <li><a href="gallery.html"><i class="icon-double-angle-right"></i> Gallery Page</a></li>
                                <li><a href="search-page.html"><i class="icon-double-angle-right"></i> Search Page</a></li>
                                <li><a href="error-page.html"><i class="icon-double-angle-right"></i> Error Page</a></li>
                                <li><a href="invoice-page.html"><i class="icon-double-angle-right"></i> Invoice</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- SITE CONTAINER -->
            <div class="main-container">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <!-- SHORTCUT BAR -->
                            <div class="shortcut-bar">
                                <ul class="shortcut-items">
                                    <li><a href="#"><span class="count-noty">12</span><i class="icon-screen-3"></i><span class="shortcut-label">Dashboard</span></a></li>
                                    <li><a href="#"><i class="icon-cogs"></i><span class="shortcut-label">Settings</span></a></li>
                                    <li><a href="#"><i class="icon-chart"></i><span class="shortcut-label">Statistics</span></a></li>
                                    <li><a href="#"><i class="icon-users-2"></i><span class="shortcut-label">Users</span></a></li>
                                    <li><a href="#"><i class="icon-file-8"></i><span class="shortcut-label">Content</span></a></li>
                                    <li><a href="#"><i class="icon-briefcase"></i><span class="shortcut-label">Media</span></a></li>
                                    <li><a href="#"><i class="icon-stack-list"></i><span class="shortcut-label">Task List</span></a></li>
                                    <li><a href="#"><i class="icon-folder"></i><span class="shortcut-label">Files</span></a></li>
                                    <li><a href="#"><i class="icon-coin"></i><span class="shortcut-label">Income</span></a></li>
                                </ul>
                            </div>
                            <div class="page-header">
                                <h1><i class="icon-file"></i> Top Dropdown Menu </h1>
                            </div>
                            <ul class="breadcrumb">
                                <li><a href="#"><i class="icon-home"></i></a></li>
                                <li><a href="#">Library</a></li>
                                <li class="active">Grid Portlets</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="box-widget widget-module">
                                <div class="widget-head clearfix">
                                    <span class="h-icon"><i class="icon-arrow-right-8"></i></span>
                                    <h4 class="pull-left">With collapse and close Icons</h4>
                                    <div class="pull-right widget-action">
                                        <ul>
                                            <li><a href="#" class="widget-collapse"><i class="icon-arrow-down"></i></a></li>
                                            <li><a href="#" class="widget-remove"><i class=" icon-remove-sign"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit neque, vel aliquam orci. Duis vestibulum, quam elementum elementum aliquam, augue risus venenatis odio, at vestibulum erat neque ut sapien. Maecenas eget ipsum nibh, sit amet dapibus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa tellus, pharetra quis viverra non, tincidunt id lacus. Aenean tempor sodales purus, sit amet rhoncus purus mollis at. Curabitur sapien ante, volutpat nec ullamcorper lacinia, dapibus ut ante.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <h4 class="pull-left">No Icons</h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit neque, vel aliquam orci. Duis vestibulum, quam elementum elementum aliquam, augue risus venenatis odio, at vestibulum erat neque ut sapien. Maecenas eget ipsum nibh, sit amet dapibus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa tellus, pharetra quis viverra non, tincidunt id lacus. Aenean tempor sodales purus, sit amet rhoncus purus mollis at. Curabitur sapien ante, volutpat nec ullamcorper lacinia, dapibus ut ante.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <span class="h-icon"><i class="icon-anchor"></i></span>
                                    <h4 class="pull-left">With Dropdown</h4>
                                    <div class="table-action dropdown pull-right">
                                        <a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="icon-cog"></i></a>
                                        <ul class="dropdown-menu pull-right">
                                            <li><a href="#"><i class="icon-plus-2 "></i> Add Row</a></li>
                                            <li><a href="#"><i class=" icon-remove-sign"></i> Suspend</a></li>
                                            <li><a href="#"><i class=" icon-ok"></i> Approved</a></li>
                                            <li><a href="#"><i class=" icon-remove-3"></i> Delete</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit neque, vel aliquam orci. Duis vestibulum, quam elementum elementum aliquam, augue risus venenatis odio, at vestibulum erat neque ut sapien. Maecenas eget ipsum nibh, sit amet dapibus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa tellus, pharetra quis viverra non, tincidunt id lacus. Aenean tempor sodales purus, sit amet rhoncus purus mollis at. Curabitur sapien ante, volutpat nec ullamcorper lacinia, dapibus ut ante.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <span class="h-icon"><i class="icon-profile"></i></span>
                                    <h4 class="pull-left">With progress bar</h4>
                                    <div class="progress widget-progressbar pull-right">
                                        <div class="progress-bar " role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                            <span class="sr-only">60% Complete</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit neque, vel aliquam orci. Duis vestibulum, quam elementum elementum aliquam, augue risus venenatis odio, at vestibulum erat neque ut sapien. Maecenas eget ipsum nibh, sit amet dapibus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa tellus, pharetra quis viverra non, tincidunt id lacus. Aenean tempor sodales purus, sit amet rhoncus purus mollis at. Curabitur sapien ante, volutpat nec ullamcorper lacinia, dapibus ut ante.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 widget-module">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <span class="h-icon"><i class=" icon-windows"></i></span>
                                    <h4 class="pull-left">With loader</h4>
                                    <div class="pull-left widget-loader">
                                        <img width="16" height="11" alt="loader" src="images/ajax-loader/ajax-loader(13).gif">
                                    </div>
                                    <div class="pull-right widget-action">
                                        <ul>
                                            <li><a href="#" class="widget-collapse"><i class="icon-arrow-down"></i></a></li>
                                            <li><a href="#" class="widget-remove"><i class=" icon-remove-sign"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit neque, vel aliquam orci. Duis vestibulum, quam elementum elementum aliquam, augue risus venenatis odio, at vestibulum erat neque ut sapien. Maecenas eget ipsum nibh, sit amet dapibus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa tellus, pharetra quis viverra non, tincidunt id lacus. Aenean tempor sodales purus, sit amet rhoncus purus mollis at. Curabitur sapien ante, volutpat nec ullamcorper lacinia, dapibus ut ante.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <h4 class="pull-left">With Notification Dropdown</h4>
                                    <div class="pull-right">
                                        <ul class="notification-bar">
                                            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-bell"></i></a>
                                                <div class="dropdown-menu pull-right">
                                                    <div class="dropdown-head">
                                                        <h6>You have 10 new notifications</h6>
                                                    </div>
                                                    <ul class="notification-list">
                                                        <li><a href="#" class="clearfix"><i class="icon-star blue"></i><span class="notification-intro">Donec pretium enim vel nisl viverra posuere.<span class="notification-time">8 min ago</span></span></a></li>
                                                        <li><a href="#" class="clearfix"><i class=" icon-bell orange"></i><span class="notification-intro">Vestibulum viverra magna vitae dui volutpat dapibus. <span class="notification-time">3 hours ago</span></span></a></li>
                                                        <li><a href="#" class="clearfix"><i class=" icon-bolt brown"></i><span class="notification-intro">Fusce eget ipsum in odio consectetur condimentum et id nisl.<span class="notification-time">5 hours ago</span></span></a></li>
                                                        <li><a href="#" class="clearfix"><i class=" icon-ok-sign green"></i><span class="notification-intro">Mauris fringilla metus in mauris molestie tempor <span class="notification-time">8 hours ago</span></span></a></li>
                                                    </ul>
                                                    <div class="action-btn">
                                                        <button class="btn btn-block">View All</button>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="count-noty">12</span><i class="icon-envelop-opened"></i></a>
                                                <div class="dropdown-menu pull-right">
                                                    <div class="dropdown-head">
                                                        <h6>You have 32 new messages</h6>
                                                    </div>
                                                    <ul class="msg-list">
                                                        <li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/binjal.png"></span><span><i>binjal</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
                                                        <li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/sharmin.png"></span><span><i>sharmin</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
                                                        <li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/shusi.png"></span><span><i>shusi</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
                                                        <li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/jamjam.png"></span><span><i>jamjam</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
                                                        <li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/sinha.png"></span><span><i>sinha</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
                                                    </ul>
                                                    <div class="action-btn">
                                                        <button class="btn btn-block">View All</button>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit neque, vel aliquam orci. Duis vestibulum, quam elementum elementum aliquam, augue risus venenatis odio, at vestibulum erat neque ut sapien. Maecenas eget ipsum nibh, sit amet dapibus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa tellus, pharetra quis viverra non, tincidunt id lacus. Aenean tempor sodales purus, sit amet rhoncus purus mollis at. Curabitur sapien ante, volutpat nec ullamcorper lacinia, dapibus ut ante.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 widget-module">
                            <div class="box-widget ">
                                <div class="widget-head clearfix">
                                    <span class="h-icon"><i class=" icon-alarm-2"></i></span>
                                    <h4 class="pull-left">With animated progress bar</h4>
                                    <div id="progressbar" class="widget-animated-progress pull-left">
                                        <span class="progress-label">Loading...</span>
                                    </div>
                                    <div class="pull-right widget-action">
                                        <ul>
                                            <li><a href="#" class="widget-collapse"><i class="icon-arrow-down"></i></a></li>
                                            <li><a href="#" class="widget-remove"><i class=" icon-remove-sign"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit neque, vel aliquam orci. Duis vestibulum, quam elementum elementum aliquam, augue risus venenatis odio, at vestibulum erat neque ut sapien. Maecenas eget ipsum nibh, sit amet dapibus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa tellus, pharetra quis viverra non, tincidunt id lacus. Aenean tempor sodales purus, sit amet rhoncus purus mollis at. Curabitur sapien ante, volutpat nec ullamcorper lacinia, dapibus ut ante.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <h4 class="pull-left">Grid 1</h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris cons
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-11">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <h4 class="pull-left">Grid 11 </h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit neque, vel aliquam orci. Duis vestibulum, quam elementum elementum aliquam, augue risus venenatis odio, at vestibulum erat neque ut sapien. Maecenas eget ipsum nibh, sit amet dapibus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa tellus, pharetra quis viverra non, tincidunt id lacus. Aenean tempor sodales purus, sit amet rhoncus purus mollis at. Curabitur sapien ante, volutpat nec ullamcorper lacinia, dapibus ut ante.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <h4 class="pull-left">Grid 2</h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-10">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <h4 class="pull-left">Grid 10 </h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit neque, vel aliquam orci. Duis vestibulum, quam elementum elementum aliquam, augue risus venenatis odio, at vestibulum erat neque ut sapien. Maecenas eget ipsum nibh, sit amet dapibus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa tellus, pharetra quis viverra non, tincidunt id lacus. Aenean tempor sodales purus, sit amet rhoncus purus mollis at. Curabitur sapien ante, volutpat nec ullamcorper lacinia, dapibus ut ante.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <h4 class="pull-left">Grid 3</h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <h4 class="pull-left">Grid 9 </h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit neque, vel aliquam orci. Duis vestibulum, quam elementum elementum aliquam, augue risus venenatis odio, at vestibulum erat neque ut sapien. Maecenas eget ipsum nibh, sit amet dapibus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa tellus, pharetra quis viverra non, tincidunt id lacus. Aenean tempor sodales purus, sit amet rhoncus purus mollis at. Curabitur sapien ante, volutpat nec ullamcorper lacinia, dapibus ut ante.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <h4 class="pull-left">Grid 4</h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <h4 class="pull-left">Grid 8 </h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit neque, vel aliquam orci. Duis vestibulum, quam elementum elementum aliquam, augue risus venenatis odio, at vestibulum erat neque ut sapien. Maecenas eget ipsum nibh, sit amet dapibus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa tellus, pharetra quis viverra non, tincidunt id lacus. Aenean tempor sodales purus, sit amet rhoncus purus mollis at. Curabitur sapien ante, volutpat nec ullamcorper lacinia, dapibus ut ante.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <h4 class="pull-left">Grid 5</h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit neque, vel aliquam orci. Duis vestibulum, quam elementum elementum aliquam, augue risus venenatis odio, at vestibulum erat neque ut sapien.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <h4 class="pull-left">Grid 7 </h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit neque, vel aliquam orci. Duis vestibulum, quam elementum elementum aliquam, augue risus venenatis odio, at vestibulum erat neque ut sapien. Maecenas eget ipsum nibh, sit amet dapibus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa tellus, pharetra quis viverra non, tincidunt id lacus. Aenean tempor sodales purus, sit amet rhoncus purus mollis at. Curabitur sapien ante, volutpat nec ullamcorper lacinia, dapibus ut ante.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <h4 class="pull-left">Grid 6</h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit neque, vel aliquam orci. Duis vestibulum, quam elementum elementum aliquam, augue risus venenatis odio, at vestibulum erat neque ut sapien. Maecenas eget ipsum nibh, sit amet dapibus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa tellus, pharetra quis viverra non, tincidunt id lacus. Aenean tempor sodales purus, sit amet rhoncus purus mollis at. Curabitur sapien ante, volutpat nec ullamcorper lacinia, dapibus ut ante.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="box-widget">
                                <div class="widget-head clearfix">
                                    <h4 class="pull-left">Grid 6 </h4>
                                </div>
                                <div class="widget-container">
                                    <div class="widget-block">
                                        <div class="widget-content box-padding">
                                            <!--box-spacing define 20px padding for all content here-->
                                            <p>
                                                Fusce et lacus vitae mauris consequat suscipit in at libero. Fusce erat metus, rhoncus ut aliquam varius, vulputate et odio. Morbi gravida porttitor enim ac commodo. Nunc eu sapien quam, non interdum quam. Cras lacinia nibh vitae elit mollis molestie. Nunc at nunc felis. Sed sagittis porta molestie. Proin congue accumsan commodo. Vestibulum malesuada fringilla nibh vel sagittis. Fusce eu velit neque, vel aliquam orci. Duis vestibulum, quam elementum elementum aliquam, augue risus venenatis odio, at vestibulum erat neque ut sapien. Maecenas eget ipsum nibh, sit amet dapibus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa tellus, pharetra quis viverra non, tincidunt id lacus. Aenean tempor sodales purus, sit amet rhoncus purus mollis at. Curabitur sapien ante, volutpat nec ullamcorper lacinia, dapibus ut ante.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/prettify.js"></script>
        <!--jQuery touch scroll -->
        <script src="js/jquery.nicescroll.js"></script>
        <script src='js/jquery.cookie.js'></script>
        <script src='js/jquery.hoverIntent.minified.js'></script>
        <!--jQuery leftbar navigation accordion -->
        <script src='js/jquery.dcjqaccordion.2.7.js'></script>
        <!-- Theme common script -->
        
        <script src='js/common-script.js'></script>
        <!--[if lte IE 7]>
                        <script src="js/font-alpona-ie7.js"></script>
                        <![endif]-->
        <script>
            $(function() {
                var progressbar = $("#progressbar"),
                        progressLabel = $(".progress-label");
                progressbar.progressbar({
                    value: false,
                    change: function() {
                        progressLabel.text(progressbar.progressbar("value") + "%");
                    },
                    complete: function() {
                        progressLabel.text("Complete!");
                    }
                });
                function progress() {
                    var val = progressbar.progressbar("value") || 0;
                    progressbar.progressbar("value", val + 1);
                    if (val < 99) {
                        setTimeout(progress, 100);
                    }
                }
                setTimeout(progress, 3000);
            });
        </script>
    </body>
</html>